<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">近一年告警累计次数TOP3</div>
      </div>
    </div>
    <div class="AI-container">
      <div class="AI-cht1">
        <div class="cht-1"></div>
        <div class="cht-2"></div>
        <div class="cht-3"></div>
      </div>
      <div class="cht16">
        <v-chart
          id="chart16"
          ref="chart16"
          class="chart16"
          :option="option16"
        />
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">近一年告警设备来源分布</div>
      </div>
    </div>
    <div class="flex-container-fi">
      <div class="cht-fi25">
        <v-chart
          id="chart25"
          ref="chart25"
          class="chart25"
          :option="option25"
        />
        <div class="ana-item-fi1"></div>
        <div class="ana-item-fi2"></div>
        <div class="ana-item-fi3"></div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">告警记录</div>
      </div>
    </div>
    <div class="flex-container-fi">
      <el-table
        :data="tableData"
        class="transparent-table"
        height="320"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="时间">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text" @click="showDetail(row)">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="企业名称">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text" @click="showDetail(row)">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="地址" width="150">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text" @click="showDetail(row)">{{
              row.status
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      option16: {},
      tableData: [
        { index: 1, type: "类型1", status: "已完结", name: "17" },
        { index: 2, type: "类型2", status: "待处理", name: "16" },
        { index: 3, type: "类型3", status: "已完结", name: "15" },
        { index: 4, type: "类型4", status: "已完结", name: "11" },
        { index: 5, type: "类型5", status: "已完结", name: "41" },
        { index: 6, type: "类型6", status: "已完结", name: "13" },
        { index: 7, type: "类型7", status: "已完结", name: "12" },
        { index: 8, type: "类型8", status: "已完结", name: "1" },
        // 其他数据
      ],
    };
  },
  setup() {
    const chart25 = ref(null);
    const option25 = ref(null);
    async function fetchData() {
      try {
        option25.value = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            top: "18%",
            left: "10%",
            bottom: "10%",
            tooltip: {
              axisPointer: {
                label: {
                  fontSize: 16,
                },
              },
            },
          },

          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed"],
            axisPointer: {
              type: "shadow",
            },
            nameTextStyle: {
              fontSize: 16,
            },
            axisLabel: {
              interval: 0,
              fontSize: 16,
              color: "#ffffff", // 设置图例文字大小
            },
            axisTick: {
              show: false,
            },
          },

          yAxis: {
            type: "value",
            show: false,
          },
          series: [
            {
              name: "事件总数",
              type: "bar",
              barWidth: 38,
              itemStyle: {
                color: function (params) {
                  // 设置白色渐变和红色渐变的间隔
                  if (params.dataIndex === 0) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#D4711840" },
                      { offset: 0.1, color: "#D47118" },
                      { offset: 0.5, color: "#D4711896" },
                      { offset: 1, color: "#D4711800" },
                    ]);
                  } else if (params.dataIndex === 1) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#20BAB140" },
                      { offset: 0.1, color: "#20BAB1" },
                      { offset: 0.5, color: "#20BAB196" },
                      { offset: 1, color: "#20BAB100" },
                    ]);
                  } else
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#04D74C40" },
                      { offset: 0.1, color: "#04D74C" },
                      { offset: 0.5, color: "#04D74C65" },
                      { offset: 1, color: "#04D74C00" },
                    ]);
                },
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 件";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: [120, 200, 150],
            },
          ],
        };
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    }
    function initChart() {
      //   chart1.value = echarts.init(document.getElementById("chart1"));
      chart25.value = echarts.init(document.getElementById("chart25"));
      watch(
        option25,
        () => {
          //   chart1.value.setOption(option1.value);
          chart25.value.setOption(option25.value);
        },
        { deep: true }
      );
    }
    onMounted(() => {
      initChart();
      fetchData();
    });
    return {
      //   option1,
      option25,
    };
  },
  mounted() {
    var gradientColors = [
      ["#EC791400", "#D57117"],
      ["#EC791400", "#D57117"],
      ["#EC791400", "#D57117"],
    ];
    this.option16 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "0%",
        left: "0%",
        right: "15%",
        bottom: "-10%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        show: false,
      },
      yAxis: {
        type: "category",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 30,
          fontSize: 16,
          align: "right",
          color: "#ffffff",
        },
        data: ["陶家浜", "陶家浜2", "陶家浜3"],
      },
      series: [
        {
          name: "2011",
          type: "bar",
          data: [18203, 23489, 29034],
          barWidth: 18,
          label: {
            show: true,
            fontSize: 16,
            color: "#ffffff",
            formatter: function (params) {
              return params.value + "(" + ")";
            },
            position: "right",
          },
          itemStyle: {
            borderRadius: [0, 10, 10, 0],
            color: function (params) {
              // 根据条形的索引选择对应的渐变色
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: gradientColors[params.dataIndex][0],
                },
                {
                  offset: 1,
                  color: gradientColors[params.dataIndex][1],
                },
              ]);
            },
          },
        },
      ],
    };
    this.renderChart(); // 渲染图表
  },
  methods: {
    renderChart() {
      const myChart16 = echarts.init(document.getElementById("chart16")); // 初始化echarts图表
      myChart16.setOption(this.option16); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}

.flex-container-fi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #ffffff;
  --el-table-header-text-color: #ffffff;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
.eltableXH {
  width: 2.375rem;
  height: 1.875rem;
  background-image: url("../assets/序号.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.eltablexq {
  color: #ffffff;
}
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover > td {
  background: rgba(0, 255, 255, 0.217) !important;
}
/* 修改表头样式-加边框 */
::v-deep .el-table__header-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.575);
}
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  text-align: center;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AI-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.5rem 0.3rem;
}
.AI-cht1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  height: 8rem;
}
.cht-1 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第一名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-2 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第二名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-3 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第三名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht16 {
  margin-left: 0.5rem;
  flex-grow: 1;
  width: 20rem;
  height: 8rem;
}
.chart16 {
  width: 20rem;
  height: 8rem;
}
.cht-fi25 {
  position: relative;
  margin-left: 1rem;
  flex-grow: 1;
  width: 25rem;
  height: 12.5rem;
}
.chart25 {
  position: absolute;
  top: 0;
  left: 0;
  width: 25rem;
  height: 12.5rem;
  z-index: 1;
}
.ana-item-fi1 {
  position: absolute;
  top: 2.3rem;
  left: 3.8rem;
  width: 4rem;
  height: 9rem;
  border: 0.08rem solid #d47118;
}
.ana-item-fi2 {
  position: absolute;
  top: 2.3rem;
  left: 10.45rem;
  width: 4rem;
  height: 9rem;
  border: 0.08rem solid #20bab1;
}
.ana-item-fi3 {
  position: absolute;
  top: 2.3rem;
  left: 17.15rem;
  width: 4rem;
  height: 9rem;
  border: 0.08rem solid #04d74c;
}
</style>